<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>Perfekta. Multipurpose Site Theme.</title>
		<link rel="shortcut icon" href="images/favicon.png">

		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

		<!-- Custom CSS -->
		<link href="css/style.css" rel="stylesheet" media="screen">

		<!-- Owl Carousel stylesheet -->
		<link href="css/owl.carousel.css" rel="stylesheet">

		<!-- Owl Carousel Default Theme -->
		<link href="css/owl.theme.css" rel="stylesheet">

		<!-- Fancybox -->
		<link href="css/jquery.fancybox.css" rel="stylesheet">

		<!-- Google Fonts -->
		<link href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic|Bree+Serif" rel="stylesheet">

		<!-- Font Awesome Icons -->
		<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.2/css/font-awesome.css" rel="stylesheet">

		<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
		<script src="js/html5shiv.js"></script>
		<script src="js/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>

		<!-- Fixed navbar -->
		<div class="navbar navbar-inverse navbar-fixed-top">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="index.html"><img src="http://coffeecreamthemes.com/themes/perfekta/site/images/logo.png" alt="Perfekta. Multipurpose Site Theme." class="img-responsive" /></a>
				</div>
				<div class="navbar-collapse collapse">
					<ul class="nav navbar-nav">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Home <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="index.html">Full Width Slider</a></li>
								<li><a href="index-fullscreen.html">Full Screen Slide</a></li>
								<li><a href="index-fixed.html">Fixed Width Slider</a></li>
								<li><a href="index-bootstrap-fullwidth.html">Full Width Bootstrap Carousel</a></li>
								<li><a href="index-bootstrap-fixedwidth.html">Fixed Width Bootstrap Carousel</a></li>
								<li><a href="index-image-text.html">Static Image and Text Banner</a></li>
								<li><a href="index-image.html">Static Image Banner</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="features.html">Features</a></li>
								<li><a href="about.html">About Us</a></li>
								<li><a href="member.html">Team Member</a></li>
								<li><a href="leftcolumn.html">Left Column</a></li>
								<li><a href="rightcolumn.html">Right Column</a></li>
								<li><a href="contact.html">Contact</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Portfolio <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="portfolio1.html">1 Columns</a></li>
								<li><a href="portfolio2.html">2 Columns</a></li>
								<li><a href="portfolio3.html">3 Columns</a></li>
								<li><a href="portfolio4.html">4 Columns</a></li>
								<li><a href="project.html">Single Project Page</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="blog.html">Post List</a></li>
								<li><a href="post.html">Single Post</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Shop <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="shop.html">Product List</a></li>
								<li><a href="products.html">Product Details</a></li>
								<li><a href="basket.html">Basket</a></li>
								<li><a href="checkout.html">Checkout</a></li>
							</ul>
						</li>
					</ul>
				</div><!--/.nav-collapse -->
			</div><!--/.container -->
		</div><!--/.navbar -->

		<!-- Portfolio Start -->
		<div class="container">

			<div class="row row-margin no-fade">
				<div class="col-sm-12">
					<h1>Two Column Portfolio</h1>

					<ul class="filter-menu">
						<li class="filter btn btn-default active" data-filter="mix">All</li>
						<li class="filter btn btn-default" data-filter="photography">Photography</li>
						<li class="filter btn btn-default" data-filter="illustrations">Illustrations</li>
					</ul>

					<ul class="portfolio portfolio2">

						<!-- Portfolio Item 1 -->
						<li class="mix illustrations">
							<div class="image-container">
								<img src="http://placehold.it/900x560" alt="" />
								<div class="hover">
									<div class="hover-icons">
										<span class="view-project"><a href="project.html"><i class="fa fa-search fa-2x"></i></a></span>
										<span class="view-website"><a href="#"><i class="fa fa-link fa-2x"></i></a></span>
									</div>
									<p>Project Name</p>
								</div>
							</div>
						</li>

						<!-- Portfolio Item 2 -->
						<li class="mix photography">
							<div class="image-container">
								<img src="http://placehold.it/900x560" alt="" />
								<div class="hover">
									<div class="hover-icons">
										<span class="view-project"><a href="project.html"><i class="fa fa-search fa-2x"></i></a></span>
										<span class="view-website"><a href="#"><i class="fa fa-link fa-2x"></i></a></span>
									</div>
									<p>Portfolio Caption</p>
								</div>
							</div>
						</li>

						<!-- Portfolio Item 3 -->
						<li class="mix illustrations">
							<div class="image-container">
								<img src="http://placehold.it/900x560" alt="" />
								<div class="hover">
									<div class="hover-icons">
										<span class="view-project"><a href="project.html"><i class="fa fa-search fa-2x"></i></a></span>
										<span class="view-website"><a href="#"><i class="fa fa-link fa-2x"></i></a></span>
									</div>
									<p>Project Name</p>
								</div>
							</div>
						</li>

						<!-- Portfolio Item 4 -->
						<li class="mix photography">
							<div class="image-container">
								<img src="http://placehold.it/900x560" alt="" />
								<div class="hover">
									<div class="hover-icons">
										<span class="view-project"><a href="project.html"><i class="fa fa-search fa-2x"></i></a></span>
										<span class="view-website"><a href="#"><i class="fa fa-link fa-2x"></i></a></span>
									</div>
									<p>Project Name</p>
								</div>
							</div>
						</li>

						<!-- Portfolio Item 5 -->
						<li class="mix illustrations">
							<div class="image-container">
								<img src="http://placehold.it/900x560" alt="" />
								<div class="hover">
									<div class="hover-icons">
										<span class="view-project"><a href="project.html"><i class="fa fa-search fa-2x"></i></a></span>
										<span class="view-website"><a href="#"><i class="fa fa-link fa-2x"></i></a></span>
									</div>
									<p>Project Name</p>
								</div>
							</div>
						</li>

						<!-- Portfolio Item 6 -->
						<li class="mix photography">
							<div class="image-container">
								<img src="http://placehold.it/900x560" alt="" />
								<div class="hover">
									<div class="hover-icons">
										<span class="view-project"><a href="project.html"><i class="fa fa-search fa-2x"></i></a></span>
										<span class="view-website"><a href="#"><i class="fa fa-link fa-2x"></i></a></span>
									</div>
									<p>Project Name</p>
								</div>
							</div>
						</li>

						<!-- Portfolio Item 7 -->
						<li class="mix illustrations">
							<div class="image-container">
								<img src="http://placehold.it/900x560" alt="" />
								<div class="hover">
									<div class="hover-icons">
										<span class="view-project"><a href="project.html"><i class="fa fa-search fa-2x"></i></a></span>
										<span class="view-website"><a href="#"><i class="fa fa-link fa-2x"></i></a></span>
									</div>
									<p>Project Name</p>
								</div>
							</div>
						</li>

						<!-- Portfolio Item 8 -->
						<li class="mix photography">
							<div class="image-container">
								<img src="http://placehold.it/900x560" alt="" />
								<div class="hover">
									<div class="hover-icons">
										<span class="view-project"><a href="project.html"><i class="fa fa-search fa-2x"></i></a></span>
										<span class="view-website"><a href="#"><i class="fa fa-link fa-2x"></i></a></span>
									</div>
									<p>Project Name</p>
								</div>
							</div>
						</li>

						<!-- Portfolio Item 9 -->
						<li class="mix illustrations">
							<div class="image-container">
								<img src="http://placehold.it/900x560" alt="" />
								<div class="hover">
									<div class="hover-icons">
										<span class="view-project"><a href="project.html"><i class="fa fa-search fa-2x"></i></a></span>
										<span class="view-website"><a href="#"><i class="fa fa-link fa-2x"></i></a></span>
									</div>
									<p>Project Name</p>
								</div>
							</div>
						</li>

						<!-- Portfolio Item 10 -->
						<li class="mix photography">
							<div class="image-container">
								<img src="http://placehold.it/900x560" alt="" />
								<div class="hover">
									<div class="hover-icons">
										<span class="view-project"><a href="project.html"><i class="fa fa-search fa-2x"></i></a></span>
										<span class="view-website"><a href="#"><i class="fa fa-link fa-2x"></i></a></span>
									</div>
									<p>Project Name</p>
								</div>
							</div>
						</li>

						<!-- Portfolio Item 11 -->
						<li class="mix illustrations">
							<div class="image-container">
								<img src="http://placehold.it/900x560" alt="" />
								<div class="hover">
									<div class="hover-icons">
										<span class="view-project"><a href="project.html"><i class="fa fa-search fa-2x"></i></a></span>
										<span class="view-website"><a href="#"><i class="fa fa-link fa-2x"></i></a></span>
									</div>
									<p>Project Name</p>
								</div>
							</div>
						</li>

						<!-- Portfolio Item 12 -->
						<li class="mix photography">
							<div class="image-container">
								<img src="http://placehold.it/900x560" alt="" />
								<div class="hover">
									<div class="hover-icons">
										<span class="view-project"><a href="project.html"><i class="fa fa-search fa-2x"></i></a></span>
										<span class="view-website"><a href="#"><i class="fa fa-link fa-2x"></i></a></span>
									</div>
									<p>Project Name</p>
								</div>
							</div>
						</li>

						<!-- Portfolio Item 13 -->
						<li class="mix illustrations">
							<div class="image-container">
								<img src="http://placehold.it/900x560" alt="" />
								<div class="hover">
									<div class="hover-icons">
										<span class="view-project"><a href="project.html"><i class="fa fa-search fa-2x"></i></a></span>
										<span class="view-website"><a href="#"><i class="fa fa-link fa-2x"></i></a></span>
									</div>
									<p>Project Name</p>
								</div>
							</div>
						</li>

						<!-- Portfolio Item 14 -->
						<li class="mix photography">
							<div class="image-container">
								<img src="http://placehold.it/900x560" alt="" />
								<div class="hover">
									<div class="hover-icons">
										<span class="view-project"><a href="project.html"><i class="fa fa-search fa-2x"></i></a></span>
										<span class="view-website"><a href="#"><i class="fa fa-link fa-2x"></i></a></span>
									</div>
									<p>Project Name</p>
								</div>
							</div>
						</li>

						<!-- Portfolio Item 15 -->
						<li class="mix illustrations">
							<div class="image-container">
								<img src="http://placehold.it/900x560" alt="" />
								<div class="hover">
									<div class="hover-icons">
										<span class="view-project"><a href="project.html"><i class="fa fa-search fa-2x"></i></a></span>
										<span class="view-website"><a href="#"><i class="fa fa-link fa-2x"></i></a></span>
									</div>
									<p>Project Name</p>
								</div>
							</div>
						</li>

						<!-- Portfolio Item 16 -->
						<li class="mix photography">
							<div class="image-container">
								<img src="http://placehold.it/900x560" alt="" />
								<div class="hover">
									<div class="hover-icons">
										<span class="view-project"><a href="project.html"><i class="fa fa-search fa-2x"></i></a></span>
										<span class="view-website"><a href="#"><i class="fa fa-link fa-2x"></i></a></span>
									</div>
									<p>Project Name</p>
								</div>
							</div>
						</li>

					</ul>
				</div>
			</div>
			
		</div>
		<!-- Portfolio End -->

		<!-- Prefooter Start -->
		<div class="prefooter">
			<div class="container">
				<div class="row">
					<div class="col-sm-3 latest-posts">
						<h5>Latest News</h5>
						<div class="row">
							<div class="col-xs-4">
								<img src="http://placehold.it/80x80" alt="" />
							</div>
							<div class="col-xs-8">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam tellus.
								<br><a href="#">Read More</a>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-4">
								<img src="http://placehold.it/80x80" alt="" />
							</div>
							<div class="col-xs-8">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam tellus.
								<br><a href="#">Read More</a>
							</div>
						</div>
					</div>
					<div class="col-sm-3 latest-comments">
						<h5>Latest Comments</h5>
						<div class="row">
							<div class="col-xs-4">
								<img src="http://placehold.it/80x80" alt="" />
							</div>
							<div class="col-xs-8">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam tellus.
								<br><a href="#">Read More</a>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-4">
								<img src="http://placehold.it/80x80" alt="" />
							</div>
							<div class="col-xs-8">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam tellus.
								<br><a href="#">Read More</a>
							</div>
						</div>
					</div>
					<div class="col-sm-3 footer-photos">
						<h5>Latest Photos</h5>
						<ul>
							<li><a href="images/footergallery-big1.jpg" class="fancybox" data-fancybox-group="group" title=""><img src="http://placehold.it/90x90" alt="" /></a></li>
							<li><a href="images/footergallery-big2.jpg" class="fancybox" data-fancybox-group="group" title=""><img src="http://placehold.it/90x90" alt="" /></a></li>
							<li><a href="images/footergallery-big3.jpg" class="fancybox" data-fancybox-group="group" title=""><img src="http://placehold.it/90x90" alt="" /></a></li>
							<li><a href="images/footergallery-big4.jpg" class="fancybox" data-fancybox-group="group" title=""><img src="http://placehold.it/90x90" alt="" /></a></li>
							<li><a href="images/footergallery-big5.jpg" class="fancybox" data-fancybox-group="group" title=""><img src="http://placehold.it/90x90" alt="" /></a></li>
							<li><a href="images/footergallery-big6.jpg" class="fancybox" data-fancybox-group="group" title=""><img src="http://placehold.it/90x90" alt="" /></a></li>
						</ul>
						<div class="clear"></div>
					</div>
					<div class="col-sm-3 footer-contact">
						<h5>Contact Us</h5>
						<ul>
							<li>
								<address>
									<i class="fa fa-map-marker"></i>
									<p>
										<span>Address:</span>
										<br>416 Water St.
										<br>New York, NY 10002, USA
									</p>
								</address>
							</li>
							<li>
								<i class="fa fa-phone"></i>
								<p><span>Phone:</span> +1 800 555 789</p>
							</li>
							<li>
								<i class="fa fa-print"></i>
								<p><span>Fax:</span> +1 123 555 789</p>
							</li>
							<li>
								<i class="fa fa-envelope"></i>
								<p><span>Email:</span> <a href="mailto:name@domain.com">name@domain.com</a></p>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- Prefooter End -->

		<!-- Footer Start -->
		<footer>
			<div class="container">
				<div class="row">
					<div class="col-sm-6">
						&copy; 2013 Perfekta. Web Design &amp; Development by <a href="http://www.coffeecreamthemes.com/" target="_blank">Coffeecream Themes</a>.
					</div>
					<div class="col-sm-6">
						<ul>
							<li><a href="http://facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a></li>
							<li><a href="http://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a></li>
							<li><a href="http://plus.google.com/" target="_blank"><i class="fa fa-google-plus"></i></a></li>
							<li><a href="http://tumblr.com/" target="_blank"><i class="fa fa-tumblr"></i></a></li>
							<li><a href="http://dribbble.com/" target="_blank"><i class="fa fa-dribbble"></i></a></li>
							<li><a href="http://xing.com/" target="_blank"><i class="fa fa-xing"></i></a></li>
							<li><a href="http://youtube.com/" target="_blank"><i class="fa fa-youtube"></i></a></li>
						</ul>
					</div>
				</div>
			</div>
		</footer>
		<!-- Footer Start -->

		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="http://code.jquery.com/jquery.js"></script>

		<!-- Bootstrap Plugins -->
		<script src="js/bootstrap.min.js"></script>

		<!-- Retina Plugin -->
		<script src="js/retina-1.1.0.min.js"></script>

		<!-- Owl Carousel Plugin -->
		<script src="js/owl.carousel.js"></script>

		<!-- Fancybox Plugin -->
		<script src="js/jquery.fancybox.js"></script>

		<!-- Bootstrap Progress Bar -->
		<script src="js/bootstrap-progressbar.js"></script>

		<!-- MixItUp Plugin -->
		<script src="js/jquery.mixitup.min.js"></script>

		<!-- Settings -->
		<script src="js/settings-inner.js"></script>
		
	</body>
</html>